<template>
	<view class="pupop"
	:style="[popupHenght]" v-if="show">
		<!-- 蒙版 -->
		<view class="mask" 
		@click.prevent="preEvent"></view>
		
		<!-- 类容部分 -->
		<view class="popup_content" 
		:style="[position,wH]">
			<slot></slot>
		</view>
		
	</view>
</template>

<script setup>
	import { computed, ref } from 'vue';
	import { systemInfo } from'@/lib/getSystem.js'
	
	const props = defineProps({
		w:{ // 弹层的宽度
			type: [String,Number],
			default: 100
		},
		h:{// 弹层的高度
			type: [String,Number],
			default: 100
		},
		x:{ // 弹层距离左边的距离
			type: [String,Number],
			default:20
		},
		y:{ // 弹层距离上边的距离
			type: [String,Number],
			default:20
		}
	})
	
	const show = ref(false)
	
	// 获得系统信息
	const { 
		windowHeight,
		screenHeight,
		windowWidth
	} = systemInfo()
	console.log(windowHeight);
	
	// 打开弹层
	const open = () => {
		show.value = true
	}

	// 关闭弹层
	const close = () => {
		show.value = false
	}
	
	// 计算组件的高度
	const popupHenght = computed(() =>{
		return `height:${windowHeight-30}px;`
	})
	
	// 计算弹层的宽高
	const wH = computed(() => {
		return `width:${props.w}px;height:${props.h}px;`
	}) 
	
	// 计算弹层的位置
	const position = computed(() => {
		let tabHeight = screenHeight - windowHeight
		let x = props.x
		let y = props.y - tabHeight
		if(x + props.w > windowWidth){
			let exceedX = (x + props.w - windowWidth)
			x = x - exceedX
		}
		if(y + props.h > windowHeight){
			let exceedY = y + props.h - windowHeight
			y = y - exceedY
		}
		return `left:${x}px;top:${y}px;`
	})
	 
	// 点击蒙版
	const preEvent = () =>{
		close()
	}
	
	defineExpose({
		open,
		close
	})
	
</script>

<style lang="less" scoped>
	.pupop{
		width: 750rpx;
		position: absolute;
		.mask{
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 10;
			// background-color: rgba(0, 0, 0, .3);
		}
		.popup_content{
			width: 300rpx;
			// height: 400rpx;
			position: fixed;
			top: 50rpx;
			left: 50rpx;
			z-index: 999;
			border-radius: 15rpx;
			background-color: #f7931e;
		}
	}
</style>